import {Button} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {exportRecords, queryPage} from './service';
import {saveFileAs} from '@/utils/utils';
import CreateForm from "@/pages/OrderManagement/StoreOrder/components/CreateForm";
import styles from "@/global.less";

import Access from '@/components/Access/Access';

const TableList = (props) => {
  const actionRef = useRef();

  const [count, setCount] = useState();

  const [settleRecords, setSettleRecords] = useState(false);
  const [outModal, handleOutModal] = useState(false);


  useEffect(() => {

  }, []);

  const columns = [
    {
      title: '操作人姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '操作人工号',
      dataIndex: 'number',
    },
    {
      title: '操作业务',
      dataIndex: 'bizType',
      hideInSearch: true,
      valueEnum: {
        0: {
          text: '查看明细',
          status: 'Processing',
        },
        3: {
          text: '充值',
          status: 'Success',
        },
        4: {
          text: '消费',
          status: 'Success',
        },
      },
    },
    {
      title: '能否确认本人',
      dataIndex: 'confirm',
      hideInSearch: true,
      valueEnum: {
        true: {
          text: '能',
          status: 'Processing',
        },
        false: {
          text: '不能',
          status: 'Success',
        },
      },
    },
    {
      title: '认证方式',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        0: {
          text: '短信',
          status: 'Processing',
        },
        1: {
          text: '惠民购',
          status: 'Success',
        },
        2: {
          text: '上传',
          status: 'Success',
        },
      },
    },
    {
      title: '输入信息',
      dataIndex: 'searchCode',
      hideInSearch: true,
    },
    {
      title: '提交信息',
      dataIndex: 'code',
      hideInSearch: true,
      render: (_, record) => {
        if (record.code && record.code.toString().indexOf("http") !== -1) {
          return <a
            onClick={() => {
              window.open(record.code)
            }}
          >
            查看资料
          </a>;
        } else {
          return _;
        }
      },
    },
    {
      title: '会员名',
      dataIndex: 'memberName',
      hideInSearch: true,
    },
    {
      title: '会员卡号',
      dataIndex: 'memberNumber',
      hideInSearch: true,
    },
    {
      title: '确认时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (dom) => {
        return <div>{new Date(dom).toLocaleString()}</div>
      }
    },
  ];
  const outColumns = [
    {
      title: '工号',
      dataIndex: 'number',
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="身份确认记录"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1200}}
        bordered
        toolBarRender={() => [
          <Access accessKey={"@exportIdentityConfirm"}>
            <Button loading={settleRecords} type="primary" onClick={() => {
              handleOutModal(true);
              setSettleRecords(true);
            }}>
              导出记录
            </Button>
          </Access>
          ,
        ]}
        request={(params, sorter, filter) => queryPage({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: true,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />
      <CreateForm
        title={'导出信息'}
        width={800}
        footer={null}
        onCancel={() => {
          handleOutModal(false);
          setSettleRecords(false);
        }}
        modalVisible={outModal}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={(value) => {
            handleOutModal(false);
            exportRecords(value).then(res => {
              if (res) {
                saveFileAs(res, '身份确认记录');
              }
              setSettleRecords(false);
            })
          }}
          rowKey={r => r.id}
          bordered
          type="form"
          columns={outColumns}
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
